<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板字符串</title>
</head>

<body>
    <script>
        //一般字符串的连接
        let name = "Jelly";
        let hobby = "Coding";
        let age = 20;
        console.log(`${name} loves ${hobby} her is age ${age} `);
        //DOM元素模拟
        let oDiv = `<div id="Mydiv">
                   this is html box
                 </div>`;
        console.log(oDiv);
        //模板字符串Todo实战
        let Todo = {
            name: "Jelly",
            date: "2019/5/12",
            todos: [{
                    name: "Go to Store",
                    completed: false
                },
                {
                    name: "Watch Movies",
                    completed: true
                },
                {
                    name: "Running",
                    completed: true
                }
            ]
        }

        let nativeList = `
         <ul>
          <li>姓名: ${Todo.name}</li>
          <li>日期: ${Todo.date}</li>
          ${Todo.todos.map(todo => `<li>${todo.name} ${todo.completed ? '√' : '×'}</li>`).join('')}
         </ul>
     `
        console.log(nativeList);
    </script>
</body>

</html>